import { format } from "path"
import { useMemo } from "react"
import { useSearchParams } from "react-router-dom"
import { useProject } from "utils/project"
import { useSetUrlSearchParam, useUrlQueryParam } from "utils/url"

export const useProjectSeacrchParam = () => {
  const [param,setParam] = useUrlQueryParam(['name','personId'])
  return [
    useMemo(()=>({...param,personId:Number(param.personId) || undefined}),[param]),
    setParam
  ] as const
}

export const useProjectsQueryKey = () =>{
  const [params] = useProjectSeacrchParam()
  return ['projects',params]
}

export const useProjectModal = () =>{
  const [{projectCreate},setProjectCreate] = useUrlQueryParam([
    'projectCreate'
  ])

  const [{editingProjectId},setEditingProjectId] = useUrlQueryParam([
    'editingProjectId'
  ])

  const setUrlParams = useSetUrlSearchParam()
  const {data:editingProject,isLoading} = useProject(Number(editingProjectId))

  const open = () => setProjectCreate({projectCreate:true})
  // const close = () => setProjectCreate({projectCreate: false})
  const close = () => setUrlParams({
    projectCreate:"",
    editingProjectId:""
  })
  



  const startEdit = (id:number) => setEditingProjectId({editingProjectId: id})
  // return [
  //   projectCreate === 'true',
  //   open,
  //   close
  // ] as const
  return {
    projectModalOpen: projectCreate === 'true' || Boolean(editingProject),
    open,
    close,
    startEdit,
    editingProject,
    isLoading
  }
}

